<template>
	<view class="dam-flex_row jz-icon-text">
		<view class="jz-icon_hint">
			<slot name="icon">
				<icon :class="''+iconClz"></icon>
			</slot>
		</view>
		<view class="dam-flex_row jz-title">
			{{title}}
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { watch, ref, onMounted } from 'vue';

	const height = ref('30px');
	const props = defineProps({
		iconClz: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: '标题'
		},
		titleSize: {
			type: String,
			default: '16px'
		},
		titleColor: {
			type: String,
			default: '#333333'
		}
	})
</script>

<style lang="scss" scoped>
	@import "/dam_uni_frame/styles/dam_theme_common.scss";
	@import "/static/css/iconfont.css";

	.jz-icon-text {
		width: 100%;
		align-items: center;
	}

	.jz-icon_hint {
		color: v-bind(titleColor);
		font-size: v-bind(titleSize);
		text-align: center;
		align-items: center;
	}

	.jz-title {
		color: v-bind(titleColor);
		font-size: v-bind(titleSize);
		text-align: center;
		align-items: center;
		padding-left: 4px;
	}
</style>